import React, {useState, useEffect} from 'react'
import '@wangeditor/editor/dist/css/style.css'
import {Editor, Toolbar} from '@wangeditor/editor-for-react'
import {message} from "antd";
import {request} from "@@/exports";

export async function upload(
  data: FormData,
  options?: { [key: string]: any },
) {
  const hide = message.loading('上传中...', 0)
  const res = await request<{
    code: number;
    data: Record<string, any>;
    msg?: string;
  }>('/product-server/api/v1/file/upload', {
    method: 'POST',
    data,
    ...(options || {}),
  });
  hide()
  message.success("上传成功")
  return res
}

function MyEditor(props: any) {
  const [editor, setEditor] = useState<any>(null) // 存储 editor 实例
  const toolbarConfig = {
    toolbarKeys: [
      "headerSelect",
      "blockquote",
      "|",
      "bold",
      "underline",
      "italic",
      {
        "key": "group-more-style",
        "title": "更多",
        "iconSvg": "<svg viewBox=\"0 0 1024 1024\"><path d=\"M204.8 505.6m-76.8 0a76.8 76.8 0 1 0 153.6 0 76.8 76.8 0 1 0-153.6 0Z\"></path><path d=\"M505.6 505.6m-76.8 0a76.8 76.8 0 1 0 153.6 0 76.8 76.8 0 1 0-153.6 0Z\"></path><path d=\"M806.4 505.6m-76.8 0a76.8 76.8 0 1 0 153.6 0 76.8 76.8 0 1 0-153.6 0Z\"></path></svg>",
        "menuKeys": [
          "through",
          "code",
          "sup",
          "sub",
          "clearStyle"
        ]
      },
      "color",
      "bgColor",
      "|",
      "fontSize",
      "fontFamily",
      "lineHeight",
      "|",
      "bulletedList",
      "numberedList",
      "todo",
      {
        "key": "group-justify",
        "title": "对齐",
        "iconSvg": "<svg viewBox=\"0 0 1024 1024\"><path d=\"M768 793.6v102.4H51.2v-102.4h716.8z m204.8-230.4v102.4H51.2v-102.4h921.6z m-204.8-230.4v102.4H51.2v-102.4h716.8zM972.8 102.4v102.4H51.2V102.4h921.6z\"></path></svg>",
        "menuKeys": [
          "justifyLeft",
          "justifyRight",
          "justifyCenter",
          "justifyJustify"
        ]
      },
      {
        "key": "group-indent",
        "title": "缩进",
        "iconSvg": "<svg viewBox=\"0 0 1024 1024\"><path d=\"M0 64h1024v128H0z m384 192h640v128H384z m0 192h640v128H384z m0 192h640v128H384zM0 832h1024v128H0z m0-128V320l256 192z\"></path></svg>",
        "menuKeys": [
          "indent",
          "delIndent"
        ]
      },
      "|",
      "emotion",
      "insertLink",
      {
        "key": "group-image",
        "title": "图片",
        "iconSvg": "<svg viewBox=\"0 0 1024 1024\"><path d=\"M959.877 128l0.123 0.123v767.775l-0.123 0.122H64.102l-0.122-0.122V128.123l0.122-0.123h895.775zM960 64H64C28.795 64 0 92.795 0 128v768c0 35.205 28.795 64 64 64h896c35.205 0 64-28.795 64-64V128c0-35.205-28.795-64-64-64zM832 288.01c0 53.023-42.988 96.01-96.01 96.01s-96.01-42.987-96.01-96.01S682.967 192 735.99 192 832 234.988 832 288.01zM896 832H128V704l224.01-384 256 320h64l224.01-192z\"></path></svg>",
        "menuKeys": [
          "insertImage",
          "uploadImage"
        ]
      },
      {
        "key": "group-video",
        "title": "视频",
        "iconSvg": "<svg viewBox=\"0 0 1024 1024\"><path d=\"M981.184 160.096C837.568 139.456 678.848 128 512 128S186.432 139.456 42.816 160.096C15.296 267.808 0 386.848 0 512s15.264 244.16 42.816 351.904C186.464 884.544 345.152 896 512 896s325.568-11.456 469.184-32.096C1008.704 756.192 1024 637.152 1024 512s-15.264-244.16-42.816-351.904zM384 704V320l320 192-320 192z\"></path></svg>",
        "menuKeys": [
          "insertVideo",
          "uploadVideo"
        ]
      },
      "insertTable",
      // "codeBlock",
      "divider",
      "|",
      "undo",
      "redo",
      // "|",
      "fullScreen"
    ]
  }
  const editorConfig = {
    "placeholder": '请输入内容...',
    MENU_CONF: {
      uploadImage: {
        // 自定义上传
        async customUpload(file: File, insertFn: any) {  // TS 语法
          const form = new FormData();
          form.append('file', file);
          form.append('type', props.type || 'banner');
          const res = await upload(form)
          insertFn(res?.data?.url, res?.data?.name, '')
        }
      },
      uploadVideo: {
        // 自定义上传
        async customUpload(file: File, insertFn: any) {  // TS 语法
          const form = new FormData();
          form.append('file', file);
          form.append('type', props.type || 'banner');
          const res = await upload(form)
          insertFn(res?.data?.url, '')
        }
      }
    },

  }

  // 及时销毁 editor
  useEffect(() => {
    return () => {
      if (editor === null) return
      editor?.destroy()
      setEditor(undefined)
    }
  }, [editor])

  return (
    <>
      <div style={{border: '1px solid #d9d9d9', zIndex: 100, marginTop: '15px'}}>
        <Toolbar
          editor={editor}
          defaultConfig={toolbarConfig}
          mode="default"
          style={{borderBottom: '1px solid #d9d9d9'}}
        />
        <Editor
          // defaultHtml={"<h2><span style=\"color: rgb(212, 177, 6); font-size: 19px;\">安徽矽芯微电子科技有限公司</span></h2><p><span style=\"color: rgb(191, 191, 191);\">Anhui Silimicro Electronics Technology Co..Ltc</span></p><p style=\"text-indent: 2em; line-height: 2;\">安徽矽芯微电子科技有限公司，位于合肥市高新区创新产业园，致力于为客户提供更好的射频毫米波芯片公司采用Fabless模式运营，构建了面向产品和客广的芯片设计和测试平台，提供小型化无源芯片、收发多功能芯片、毫米波放大器芯片及其它模拟射频芯片等系列产品，应用覆盖5G通信、卫星互联网、毫米波探测及智能交通监测等多个领域。</p><p><img src=\"https://yl-oss-file.oss-cn-chengdu.aliyuncs.com/banner/2024/06/03/01ac10a5c26a4712819303a898b6f19b.png\" alt=\"banner/2024/06/03/01ac10a5c26a4712819303a898b6f19b.png\" data-href=\"\" style=\"width: 100%;\"></p><p style=\"text-indent: 2em; line-height: 2;\">矽芯微成立于2017年，核心团队由合肥市创新领军人才领衔，是合肥市首批重点集成电路企业，在2019年荣获国家高新技术企业认证，2021年被评为合肥市高新区瞪羚企业，2022年被评为合肥市高新区米均效益标杆企业。矽芯微以联接万物、感知世界为目标愿景，秉持初心与使命，不断进步，追求卓越，锻造了一支高质量的研发和产品支持团队， 为提供全场景射频毫米波解决方案缔造无限可能。</p><h3 style=\"line-height: 2.5;\">联系方式</h3><p style=\"line-height: 2;\">电话: 0551-65300525、13275775320</p><p style=\"line-height: 2;\">邮箱: sales@silimicro.com</p><p style=\"line-height: 2;\">地址: 安徽省合肥市高新区创新大道创新产业园二期F3栋1607室</p><p style=\"text-align: center; line-height: 2.5;\"><img src=\"https://yl-oss-file.oss-cn-chengdu.aliyuncs.com/banner/2024/06/03/c285c4c1824f40c29f3d67ba264a416d.png\" alt=\"banner/2024/06/03/c285c4c1824f40c29f3d67ba264a416d.png\" data-href=\"\" style=\"\"></p><p style=\"text-align: center;\"><span style=\"color: rgb(140, 140, 140); font-size: 19px;\">扫一扫关注我们</span></p><p style=\"text-align: center;\"><span style=\"color: rgb(140, 140, 140); font-size: 19px;\">更多精彩内容</span></p><p style=\"text-align: center; line-height: 2.5;\"><br></p><p style=\"text-align: center; line-height: 2.5;\"><br></p><p style=\"text-align: center; line-height: 2.5;\"><br></p>"}
          defaultConfig={editorConfig}
          value={props?.value}
          onCreated={(editor) => {
            setEditor(editor)
          }}
          onChange={editor => {
            props?.onChange?.(editor.getHtml())
          }}
          mode="default"
          style={{height: '500px'}}
        />
      </div>
    </>
  )
}

export default MyEditor
